<nav class="navbar navbar-dark navbar-expand-md jh-navbar" style="padding:0 !important; border-bottom:1px solid rgba(150,150,150,0.2);">
    <div class="jh-logo-container float-left" >
        <a class="navbar-brand logo float-left" routerLink="/" style="margin:0;padding:0;">
            <span class="logo-img" style="height:58px;min-width:140px;"></span>
            <!--<span jhiTranslate="global.title" class="navbar-title"  >新华书店</span>-->
        </a>
        <a class="navbar-brand logo float-left" style="min-width:130px;margin-left:10px;padding:0;line-height:58px;font-size:140%;">
            666大书店
        </a>
    </div>


    <div class="navbar-collapse collapse" id="navbarResponsive" [ngbCollapse]="isNavbarCollapsed" [ngSwitch]="isAuthenticated()">
        <ul  class="navbar-nav ml-auto" >
            <li class="nav-item">
                <div class="input-group" style="min-width:375px;">
                    <input type="text" class="form-control" [(ngModel)]="keyword"  placeholder="输入图书名称或作者">
                    <div class="input-group-append" (click)="findBooksByKeyword(keyword)">
                <span class="input-group-text">
                    <i class="fa fa-search "></i>
                </span>
                    </div>
                </div>

            </li>
            <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                <a class="nav-link" routerLink="/" (click)="collapseNavbar()">
                    <span class="navbar-title" >
                        <i class="fa fa-home" aria-hidden="true" style="color:#4183c4"></i>
                        <span jhiTranslate="global.menu.home">Home</span>
                    </span>
                </a>
            </li>
            <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                <a class="nav-link" [routerLink]="['shopping-cart' ]" (click)="collapseNavbar()">
                    <span class="navbar-title" >
                        <i class="fa fa-yahoo" aria-hidden="true" style="color:#4183c4"></i>
                        <span>购物车</span>
                    </span>
                </a>
            </li>

            <!-- jhipster-needle-add-element-to-menu - JHipster will add new menu items here -->
            <li *jhiHasAnyAuthority="'ROLE_ADMIN'" ngbDropdown class="nav-item dropdown pointer" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="entity-menu">
                    <span class="navbar-title" *jhiHasAnyAuthority="'ROLE_ADMIN'">
                        <i class="fa fa-th-list" aria-hidden="true" style="color:#4183c4"></i>
                        <span jhiTranslate="global.menu.entities.main">
                            Entities
                        </span>
                    </span>
                </a>
                <ul  class="dropdown-menu" ngbDropdownMenu>
                    <li>
                        <a class="dropdown-item" routerLink="book-basic" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="collapseNavbar()">
                            <i class="fa fa-fw fa-asterisk" aria-hidden="true"  style="color:#4183c4"></i>
                            <span jhiTranslate="global.menu.entities.bookBasic">Book Basic</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" routerLink="book-type" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="collapseNavbar()">
                            <i class="fa fa-fw fa-asterisk" aria-hidden="true"  style="color:#4183c4"></i>
                            <span jhiTranslate="global.menu.entities.bookType">Book Type</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" routerLink="author" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="collapseNavbar()">
                            <i class="fa fa-fw fa-asterisk" aria-hidden="true"  style="color:#4183c4"></i>
                            <span jhiTranslate="global.menu.entities.author">Author</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" routerLink="catalog" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="collapseNavbar()">
                            <i class="fa fa-fw fa-asterisk" aria-hidden="true"  style="color:#4183c4"></i>
                            <span jhiTranslate="global.menu.entities.catalog">Catalog</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" routerLink="comment" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="collapseNavbar()">
                            <i class="fa fa-fw fa-asterisk" aria-hidden="true"  style="color:#4183c4"></i>
                            <span jhiTranslate="global.menu.entities.comment">Comment</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" routerLink="shopping-cart" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="collapseNavbar()">
                            <i class="fa fa-fw fa-asterisk" aria-hidden="true"  style="color:#4183c4"></i>
                            <span jhiTranslate="global.menu.entities.shoppingCart">Shopping Cart</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" routerLink="user-address" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="collapseNavbar()">
                            <i class="fa fa-fw fa-asterisk" aria-hidden="true"></i>
                            <span jhiTranslate="global.menu.entities.userAddress">User Address</span>
                        </a>
                    </li>
                    <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
                </ul>
            </li>
            <!--<li *jhiHasAnyAuthority="'ROLE_ADMIN'" ngbDropdown class="nav-item dropdown pointer" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="admin-menu">
                    <span class="navbar-title">
                        <i class="fa fa-user-plus" aria-hidden="true" style="color:#4183c4"></i>
                        <span jhiTranslate="global.menu.admin.main" >Administration</span>
                    </span>
                </a>
                <ul  *jhiHasAnyAuthority="'ROLE_ADMIN'" class="dropdown-menu" ngbDropdownMenu>
                    <li>
                        <a class="dropdown-item" routerLink="user-management" routerLinkActive="active" (click)="collapseNavbar()">
                            <i class="fa fa-fw fa-user" aria-hidden="true"></i>
                            <span jhiTranslate="global.menu.admin.userManagement">User management</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" routerLink="jhi-metrics" routerLinkActive="active" (click)="collapseNavbar()">
                            <i class="fa fa-fw fa-tachometer" aria-hidden="true"></i>
                            <span jhiTranslate="global.menu.admin.metrics">Metrics</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" routerLink="jhi-health" routerLinkActive="active" (click)="collapseNavbar()">
                            <i class="fa fa-fw fa-heart" aria-hidden="true"></i>
                            <span jhiTranslate="global.menu.admin.health">Health</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" routerLink="jhi-configuration" routerLinkActive="active" (click)="collapseNavbar()">
                            <i class="fa fa-fw fa-list" aria-hidden="true"></i>
                            <span jhiTranslate="global.menu.admin.configuration">Configuration</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" routerLink="audits" routerLinkActive="active" (click)="collapseNavbar()">
                            <i class="fa fa-fw fa-bell" aria-hidden="true"></i>
                            <span jhiTranslate="global.menu.admin.audits">Audits</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" routerLink="logs" routerLinkActive="active" (click)="collapseNavbar()">
                            <i class="fa fa-fw fa-tasks" aria-hidden="true"></i>
                            <span jhiTranslate="global.menu.admin.logs">Logs</span>
                        </a>
                    </li>
                    <li *ngIf="swaggerEnabled" >
                        <a class="dropdown-item" routerLink="docs" routerLinkActive="active" (click)="collapseNavbar()">
                            <i class="fa fa-fw fa-book" aria-hidden="true"></i>
                            <span jhiTranslate="global.menu.admin.apidocs">API</span>
                        </a>
                    </li>
                    <!-- jhipster-needle-add-element-to-admin-menu - JHipster will add entities to the admin menu here
                </ul>
            </li>-->
            <!--<li ngbDropdown class="nav-item dropdown pointer" *ngIf="languages">
                <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="languagesnavBarDropdown" *ngIf="languages.length > 1">
                    <span class="navbar-title">
                        <i class="fa fa-flag" aria-hidden="true"  style="color:#4183c4"></i>
                        <span jhiTranslate="global.menu.language">Language</span>
                    </span>
                </a>
                <ul class="dropdown-menu" ngbDropdownMenu *ngIf="languages.length > 1">
                    <li *ngFor="let language of languages">
                        <a class="dropdown-item" [jhiActiveMenu]="language" href="javascript:void(0);" (click)="changeLanguage(language);collapseNavbar();">{{language | findLanguageFromKey}}</a>
                    </li>
                </ul>
            </li>-->
            <li ngbDropdown class="nav-item dropdown pointer" placement="bottom-right" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="account-menu">
                  <span *ngIf="!getImageUrl()" class="navbar-title">
                    <i class="fa fa-user" aria-hidden="true"  style="color:#4183c4"></i>
                    <span jhiTranslate="global.menu.account.main">
                      Account
                    </span>
                  </span>
                  <span *ngIf="getImageUrl()">
                      <img [src]="getImageUrl()" class="profile-image img-circle" alt="Avatar">
                  </span>
                </a>
                <ul class="dropdown-menu" ngbDropdownMenu>
                    <li *ngSwitchCase="true">
                        <a class="dropdown-item" routerLink="settings" routerLinkActive="active" (click)="collapseNavbar()">
                            <i class="fa fa-fw fa-wrench" aria-hidden="true"></i>
                            <span jhiTranslate="global.menu.account.settings">Settings</span>
                        </a>
                    </li>
                    <li *ngSwitchCase="true">
                        <a class="dropdown-item" routerLink="password" routerLinkActive="active" (click)="collapseNavbar()">
                            <i class="fa fa-fw fa-clock-o" aria-hidden="true"></i>
                            <span jhiTranslate="global.menu.account.password">Password</span>
                        </a>
                    </li>
                    <li *ngSwitchCase="true">
                        <a class="dropdown-item" (click)="logout()" id="logout">
                            <i class="fa fa-fw fa-sign-out" aria-hidden="true"></i>
                            <span jhiTranslate="global.menu.account.logout">Sign out</span>
                        </a>
                    </li>
                    <li *ngSwitchCase="false">
                        <a class="dropdown-item" (click)="login()" id="login">
                            <i class="fa fa-fw fa-sign-in" aria-hidden="true"></i>
                            <span jhiTranslate="global.menu.account.login">Sign in</span>
                        </a>
                    </li>
                    <li *ngSwitchCase="false">
                        <a class="dropdown-item" routerLink="register" routerLinkActive="active" (click)="collapseNavbar()">
                            <i class="fa fa-fw fa-user-plus" aria-hidden="true"></i>
                            <span jhiTranslate="global.menu.account.register">Register</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
